<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body > div {
        width: 658px;
        height: 600px;
        margin: auto;
      }
      body > div > div {
        width: 658px;
        height: 247px;
        background-image: url(../图片/turn_on_off.png);
      }
      input {
        display: block;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div>
      <!-- <div type="button" class="innerdiv"></div> -->
      <div class="innerdiv"></div>
      <input type="text" placeholder="请输入wifi密码：" />
    </div>
  </body>
  <script>
    var odiv = document.querySelector(".innerdiv");
    var textinput = document.querySelector("input");
    var num = 0;
    odiv.onclick = function () {
      num++;
      if (num % 2 == 1) {
        odiv.style.backgroundPosition = "0 -208px";
        backgroundPosition;
        textinput.type = "password";
      } else {
        odiv.style.backgroundPosition = "0 0";
        textinput.type = "text";
      }
    };
  </script>
</html>
